<template>
  <div>
    <h1>孙子组件</h1>
    <h2>{{ info }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, Ref, toRaw, toRefs } from "vue";

export default defineComponent({
  setup() {
    // vue3在内部封装inject，不是咱们写的函数   inject<T,K>(){}
    // inject是咱们进行调用
    // 当使用时传入数据类型，不传入默认unknown

    // 当前传入的是ref对象，ref对象当中的value是string类型

    const info = inject<Ref<string>>("info");
    // console.log(info); //这是TypeScript没有定义数据类型，unknown   。
    // ref对象在setup当中操作，一定是xx.value,在template模板当中直接使用即可，实际上再template模板当中inValue，它相当于setup当中的inValue.valule
    console.log(info); //ref对象
    console.log(info?.value); //Object is possibly 'undefined'  可有可无  可选的
    const num = inject<Ref<number>>("num");
    console.log(num?.value);

    // 传递的是对象类型，通过接口定义数据类型
    interface inObj {
      name: string;
      age: number;
    }
    const obj = inject<inObj>("obj");
    console.log(obj);
    console.log(obj?.name);

    // 总而言之 provide传递给子级组件的值，不建议更改

    return {
      info,
    };
  },
});
</script>

<style scoped>
</style>